import React, { ComponentType, FC } from 'react';

if (process.env.BROWSER) {
    require('./side-title.scss');
}

function withSideTitle<T = any>(
    wrapperComponent: ComponentType<T>,
    title: string,
): ComponentType<T> {
    const withSideTitleCom: FC<T> = (props) => {
        const Component = wrapperComponent;

        return (
            <div className="side-title-box">
                <p className="title">{title}</p>
                <Component {...props} />
            </div>
        );
    };

    withSideTitleCom.displayName = `withSideTitle(${
        wrapperComponent.displayName || 'wrapped-component'
    })`;

    return withSideTitleCom;
}

export { withSideTitle };
